<template>
  <main class="list">
    <RouterView v-slot="{ Component, route }">
      <transition mode="out-in">
        <component v-if="!route.meta.link" :is="Component" :key="route.path" />
      </transition>
    </RouterView>
  </main>
</template>

<script setup lang="ts">
</script>

<style>
.list {
  width: 100%;
  height: 100%;
}

/* 全局样式 */
/* 组件离开的初始状态 */
/* .fade-leave-from {
  transform: translateX(0); */
/* opacity: 1; */
/* } */

/* 组件离开的结束状态 */
/* .fade-leave-to {
  transform: translateX(-10px); */
/* opacity: 0; */
/* } */

/* 组件进入的初始状态 */
/* .fade-enter-from {
  transform: translateX(10px); */
/* opacity: 0; */
/* } */

/* 组件进入的结束状态 */
/* .fade-enter-to {
  transform: translateX(0); */
/* opacity: 1; */
/* } */

/* 组件离开和进入的过渡效果 */
/* .fade-leave-active,
.fade-enter-active {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
} */
</style>
